import React, { PureComponent } from 'react';
import { Form, Input, Button, notification ,Tooltip,Icon} from 'antd';
import { connect } from 'dva';
import "./form.less"
class Formular extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {

            formulars: [{ key: "formular0", value: "" }]
        }
        this.onConfirm = this.onConfirm.bind(this)
    }
    componentDidMount() {
        let {extra,onLoaded}=this.props;
        if (onLoaded) {
           onLoaded(this);
        }
        if(extra&&extra.expression){
            let arr=[]
            let splitstring=extra.expression.split(")+(")
            const len=splitstring.length;
            for (let i = 0; i < len; i++) {
                let item = splitstring[i];
                item=item.replace(/\(|\)/g,'')
                arr.push({
                    key:"formular"+i,
                    value:item
                })
            }

            this.setState({
                formulars:arr
            })
        }
        
    }
    onConfirm(params = {}) {
        let {extra,form,getFormular}=this.props;
        form.validateFields((error, values) => {
            if (!error) {
                let str = "";
                let formulars = this.state.formulars;
                let len = formulars.length
                if (formulars && len) {
                    for (let i = 0; i < len; i++) {
                        const item = formulars[i];
                        if (i < len - 1) {
                            str += '('+item.value+')' + '+'
                        } else {
                            str += '('+item.value+')'
                        }

                    }

                }
                getFormular(str)
                if (params.onSuccess) {
                    params.onSuccess("");
                }

            } else {
                if (params.onError) {
                    params.onError("");
                }
            }
        })
    }
    addFormular(e, index) {
        e.preventDefault()
        this.state.formulars.push({
            key: "formular" + new Date().getTime() + index, value: ""
        })
        this.setState({
            formulars: [...this.state.formulars]
        })
    }
    async removeFormular(e, index) {

        let len = this.state.formulars.length;
        e.persist();
        e.preventDefault()
        if (len && len > 1) {
            this.state.formulars.splice(index, 1)

            this.setState({
                formulars: [...this.state.formulars]
            })

        } else {
            notification.warn({ message: "至少配置一联公式!" })
        }

    }
    render() {
        const {
            form = {},
            mode = 'add'
        } = this.props;
        const { getFieldDecorator } = form;
        const { formulars } = this.state;
        return (
            <Form
            labelAlign="right"
                style={{ padding: "5px 5%" }}
                labelCol={{ span: 3 }}
                wrapperCol={{ span: 21 }}
                className="configspan"
            >
                {
                    formulars.map((item, index) => {
                        return <Form.Item className="half formularInput" style={{display:"flex",flex:"1 1 100%",flexWrap:"wrap"}}  key={item.key}  label={<span>
                            公式(联)&nbsp;
                  <Tooltip title="（）括号内为一联；联和联之间用+分割；一联中的布跨计算方法有30+40，3*40；（30+40）+（3*30）表示两联，第一联跨径为30，40，第二联跨径为30,30,30；联的输入通过文本框完成，文本框后添加多列文本框，允许一个文本框输入一联；大写和小写的小括号统一解析成小写的小括号。">
                                <Icon type="question-circle-o" />
                            </Tooltip>
                        </span>}> 
                            {getFieldDecorator(item.key, {
                            rules: [
                                { required: true, message: '必填' },
                                { pattern: new RegExp(/^([0-9])([0-9]|\*|\+)*$/), message: "公式不正确!" }
                            ],
                            initialValue:item.value||undefined
                        })(
                            <Input onChange={e => {
                                e.persist();
                                item.value = e.target.value
                                this.setState({
                                    formulars: [...this.state.formulars]
                                })
                            }} placeholder="公式(联);示例:3*25" />
                        )}
                            <Button style={{flex:'0 0 50px',marginLeft:'5px'}} onClick={e => this.addFormular(e, index)}>添加</Button><Button style={{flex:'0 0 50px',marginLeft:'5px'}}  onClick={e => this.removeFormular(e, index)}>删除</Button>
                        </Form.Item>
                    })
                }

            </Form>)
    }
}
export default connect(
    ({ }) => ({}),
    dispatch => ({
      
    })
)(Form.create('Formular', {

})(Formular));